<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>router</title>
    <link rel="stylesheet" href="bs/css/bootstrap.css">
</head>
<style>
    body {
        background-color: #e8e8e8;
    }
</style>
<body>

<div id="app">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="page-header">
                <h1>IT 学院 </h1>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-2 col-md-offset-2">
            <div class="list-group">
                <router-link class="list-group-item" to="/h5">Html5 学院</router-link>
                <router-link class="list-group-item" to="/java">Java 学院</router-link>
                <router-link class="list-group-item" to="/python">Python 学院</router-link>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel">
                <div class="panel-body">
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </div>

</div>

<template id="h5">
    <div>
        <h3>html5学院</h3>
        <p></p>
        <img src="./img/h5.jpg" alt="" style="width: 250px;">
        <div>
            <ul class="nav nav-tabs">
                <router-link to="/h5/basic">Html5 基础班</router-link>
                <router-link to="/h5/big">Html5 大神班</router-link>

            </ul>
            <div class="tab-content">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>


<template id="java">
    <div>
        <h3>java学院</h3>
        <p></p>
        <img src="./img/java.jpg" alt="" style="width: 250px;">
    </div>
</template>

<template id="python">
    <div>
        <h3>python学院</h3>
        <p></p>
        <img src="./img/python.jpg" alt="" style="width: 250px;">
    </div>
</template>


<template id="basic">
    <div>
        <h3>html5 基础班</h3>
        <p></p>
        <img src="./img/python.jpg" alt="" style="width: 150px;">
    </div>
</template>


<template id="big">
    <div>
        <h3>html5 大神班</h3>
        <p></p>
        <img src="./img/java.jpg" alt="" style="width: 150px;">
    </div>
</template>
<script src="./js/vue.js"></script>
<script src="./js/vue-router.js"></script>

<script>

    let html5 = Vue.extend({
        template: '#h5'
    })

    let java = Vue.extend({
        template: '#java'
    })

    let python = Vue.extend({
        template: '#python'
    })


    let basic = Vue.extend({
        template: '#basic'
    })


    let big = Vue.extend({
        template: '#big'
    })

    // 定义路由

    let routes = [
        {
            path: '/h5',
            component: html5,
            children: [
                {path: 'basic', component: basic},
                {path: 'big', component: big},
                {path: '/', redirect: 'basic'}

            ]
        },
        {path: '/java', component: java},
        {path: '/python', component: python},
        // 配置根路由
        {path: '/', redirect: '/h5'}
    ]

    let router = new VueRouter({
        routes
    })

    // 实例挂在

    new Vue({
        router
    }).$mount("#app")
</script>
</body>
</html>